<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <!-- Bootstrap -->
    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <!--<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css"/>
    <link rel="stylesheet" href="font/iconfont.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!--侧边栏-->
<div class="fix hidden-xs">
    <div class="fix_box soc">
    <span class="iconfont icon-socialwhatsapp"></span><div class="fix_details">xyz12341234</div>
    </div>
    <div class="fix_box sky">
        <span class="iconfont icon-skype"></span><div class="fix_details">xyz12341234</div>
    </div>
    <div class="fix_box wx">
        <span class="iconfont icon-weixin"></span><div class="fix_details">xyz12341234</div>
    </div>
</div>
<!--顶部导航-->
<div class="container">
    <header class="navbar navbar-static-top bs-docs-nav" id="top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar"
                    aria-expanded="true">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="javascript:void(0);" class="navbar-brand visible-lg visible-xs ">
                <div class="header_img ">
                    <img src="img/logo.png">
                </div>
            </a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown index_active">
                    <a href="index.html" class="dropdown-toggle">HOME</a>
                </li>
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">ABOUT US</a>
                    <ul class="dropdown-menu">
                        <li><a href="aboutus.html">vision & mission</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="aboutus.html">history</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="aboutus.html">our team</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="aboutus.html">partnerships</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a href="productlist.html" class="dropdown-toggle">BRANDS & PRODUCTS </a>
                </li>
                <li class="dropdown ">
                    <a href="news.html" class="dropdown-toggle" > NEWS</a>
                </li>
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">KNOWLEDGE </a>
                    <ul class="dropdown-menu">
                        <li><a href="konw_videos.html">videos</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="konw_education.html">educations</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="konw_faqs.html">faqs</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a href="contactus.html" class="dropdown-toggle" >CONTECTUS</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right top_right">
                <li class="search_box">
                    <input type="serach" class="search_input" placeholder="请输入搜索内容">
                    <icon class="iconfont icon-tubiao11"></icon>
                </li>
                <li class="langue visible-lg">
                    <div class="langue_box">
                        <img src="img/guoqi.png" width="100%">
                    </div>
                </li>
            </ul>
        </nav>
    </header>
</div>
<!--主页图-->
<div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12">
        <div class="head_img">
            <!--<img src="img/banner.png" alt="" class="img-responsive center-block" style="width: 100%;display: block">-->
            <img src="img/banner.png" alt="" class="img-responsive center-block" style="width: 100%;display: block;">
        </div>
    </div>
</div>
<!--带路轮播图的主体-->
<div class="container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="imgbox">
                    <img src="img/lunbo.png" width="100%"/>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="imgbox">
                    <img src="img/lunbo.png" width="100%"/>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="imgbox">
                    <img src="img/lunbo.png" width="100%"/>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="imgbox">
                    <img src="img/lunbo.png" width="100%"/>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<!--<div class="container">-->
    <!--<div class="row" id="post-list">-->
    <!--<div class="col-xs-12 col-md-6 col-lg-6">-->
        <!--<div class="proshow_title">electric carbon fiber heated neck shoulder wrap</div>-->
        <!--<div class="proshow_subtitle">Heating+Far Infrared Ray+ Magnetic Therapy</div>-->
        <!--<div class="proshow_content">-->
            <!--<a>1. Internationally advanced intellectual chip technology.</a>-->
            <!--<a>2. Quality unique carbon fiber as heating material increase heating effect.</a>-->
            <!--<a>3. Applying powerful magnetic power on product.</a>-->
            <!--<a>4. Emit far infrared ray and produce powerful pulsed magnetic filed. </a>-->
        <!--</div>-->
        <!--<div class="proshow_imgbox">-->
            <!--<div class="imgcell">-->
                <!--<img src="img/good1.png" />-->
            <!--</div>-->
            <!--<div class="imgcell">-->
                <!--<img src="img/good1.png"/>-->
            <!--</div>-->
            <!--<div class="imgcell">-->
                <!--<img src="img/good1.png"/>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="col-xs-12 col-md-6 col-lg-6">-->
        <!--<div class="swiper-container">-->
            <!--<div class="swiper-wrapper">-->
                <!--<div class="swiper-slide">-->
                    <!--<div class="imgbox">-->
                        <!--<img src="img/body2x.png" width="100%"/>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="swiper-slide">-->
                    <!--<div class="imgbox">-->
                        <!--<img src="img/body2x.png"  width="100%"/>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="swiper-slide">-->
                    <!--<div class="imgbox">-->
                        <!--<img src="img/body2x.png"  width="100%"/>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="swiper-slide">-->
                    <!--<div class="imgbox">-->
                        <!--<img src="img/body2x.png"  width="100%"/>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="swiper-pagination"></div>-->
    <!--</div>-->
<!--</div>-->
<!--</div>-->
<!--身体部位-->
<div class="container">
    <p class="part_title">FIND HELP FOR</p>
    <div class=" row part-content">
        <div class=" col-md-2  col-sm-2  col-xs-6 ">
            <a href="productlist.html" class="part-content_box">
                <div class="img_box"><img src="img/body1.png"></div>
                <div class="partname">shoulder</div>
            </a>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-6 ">
            <a  href="productlist.html" class="part-content_box">
                <div class="img_box"><img src="img/body2.png"></div>
                <div class="partname">knee</div>
            </a>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-6 ">
            <a href="productlist.html" class="part-content_box">
                <div class="img_box"><img src="img/body3.png"></div>
                <div class="partname">waist</div>
            </a>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-6 ">
            <a href="productlist.html" class="part-content_box">
                <div class="img_box"><img src="img/body4.png"></div>
                <div class="partname">ankle</div>
            </a>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-6  ">
            <a href="productlist.html" class="part-content_box">
                <div class="img_box"><img src="img/body5.png"></div>
                <div class="partname">ankle</div>
            </a>
        </div>
    </div>
</div>
<!--视频播放-->
<div class="container ">
    <div class="row play ">
        <div class=" col-lg-4 visible-lg">
            <div class="play_left">
                <img src="img/body4x.png">
            </div>
        </div>
        <div class="col-lg-8 col-md-12 col-sm-12">
            <div class="play-right">
                <p class="play-title">FEATURED VIDEOS</p>
                <div class="play-content">
                    <div class="row">
                        <div class="col-md-8 col-sm-6 col-xs-12" >
                            <div class="play-video"  onclick="pause(this)">
                                <div class="play_icon" onclick="play(this,event)"><span class="iconfont icon-page_right"></span></div>
                                <video src="http://vjs.zencdn.net/v/oceans.mp4"  id="myVideo" controls="controls"
                                       poster="img/banner1.png" width="100%" height="100%" >您的浏览器不支持。
                                </video>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="play_box play_down" onclick="pause(this)">
                                <div class="play_icon_mini" onclick="play(this,event)"><span class="iconfont icon-page_right"></span></div>
                                <video src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls"
                                       poster="img/banner1.png" width="100%" height="100%">您的浏览器不支持 。
                                </video>
                            </div>
                            <div class="play_box" onclick="pause(this)">
                                <div class="play_icon_mini" onclick="play(this,event)"><span class="iconfont icon-page_right"></span></div>
                                <video src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls"
                                       poster="img/banner1.png" width="100%" height="100%">您的浏览器不支持。
                                </video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--brand-->
<div class="container">
    <div class="brand_box">
        <div class="row">
            <div class="col-md-10 col-sm-10"></div>
            <div class="col-md-2 col-sm-2">
                <div class="brand_title">OUR BRANDS</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign1.png" alt=""/>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign2.png" alt=""/>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign3.png" alt=""/>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign4.png" alt=""/>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign5.png" alt=""/>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign6.png" alt=""/>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign7.png" alt=""/>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
                <a href="productlist.html" class="brand">
                    <img src="img/sign8.png" alt=""/>
                </a>
            </div>
        </div>
    </div>

</div>
<!--show-->
<div class="container show_title">
    news&eductions
</div>
<div class="show">
    <div class="container">
        <div class="row show_content_box">
            <div class="col-md-7">
                <div class="show_content">
                    <div class="row">
                        <div class="col-md-4 col-xs-12">
                            <div class="show_img">
                                <img src="img/good1.png" alt=""/>
                            </div>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <div class="show_mian">
                                <p class="show_main_title">Exos Upper Extremity Clinical Research</p>
                                <div class="show_main_content">
                                    Published in the Clinical Biomechanics Journal research results support the use of
                                    the Exos thermo-formable brace clinically vs. traditional casting.
                                </div>
                                <a class="show_mian_btn" href="productlist.html">learn more</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="show_content">
                    <div class="row">
                        <div class="col-md-4 col-xs-12">
                            <div class="show_img">
                                <img src="img/good1.png" alt=""/>
                            </div>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <div class="show_mian">
                                <p class="show_main_title">Exos Upper Extremity Clinical Research</p>
                                <div class="show_main_content">
                                    Published in the Clinical Biomechanics Journal research results support the use of
                                    the Exos thermo-formable brace clinically vs. traditional casting.
                                </div>
                                <a class="show_mian_btn" href="productlist.html">learn more</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="show_mian show-up">
                    <p class="show_main_title">Exos Upper Extremity Clinical Research</p>
                    <div class="show_main_content">
                        Published in the Clinical Biomechanics Journal research results support the use of the Exos
                        thermo-formable brace clinically vs. traditional casting.
                    </div>
                    <a class="show_mian_bottom" href="news.html">learn more<span class="iconfont icon-page_right"></span></a>
                </div>
                <div class="show_mian show-up">
                    <p class="show_main_title">Exos Upper Extremity Clinical Research</p>
                    <div class="show_main_content">
                        Published in the Clinical Biomechanics Journal research results support the use of the Exos
                        thermo-formable brace clinically vs. traditional casting.
                    </div>
                    <a class="show_mian_bottom" href="news.html">learn more<span class="iconfont icon-page_right"></span></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--手机端的侧边栏-->
<div class=" server visible-xs">
    <div class="whatsapp">
        <span class="iconfont icon-socialwhatsapp"></span>
    </div>
    <div class="skype">
        <span class="iconfont icon-skype"></span>
    </div>
    <div class="weixin">
       <div class="weixin_code">
           <img src="img/code.png" alt="">
           <span class="weixin_tri"></span>
       </div>
        <span class="iconfont icon-weixin"></span>
    </div>
</div>
<!--bottom-->
<div class="bg">
    <div class="container  ">
        <div class="row bottom">
            <div class="col-md-8 col-sm-8 col-xs-12">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-6">
                        <div class="bottom_title">ABOUT US</div>
                        <div>
                            <a class="bottom_p" href="aboutus.html">Vision & Mission</a>
                            <a class="bottom_p" href="aboutus.html">History</a>
                            <a class="bottom_p" href="aboutus.html"> Our Team</a>
                            <a class="bottom_p" href="aboutus.html">Partnerships</a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-6">
                        <div class="bottom_title">KNOWLEDGE</div>
                        <div>
                            <a class="bottom_p" href="konw_videos.html">Videos</a>
                            <a class="bottom_p" href="konw_education.html">Education</a>
                            <a class="bottom_p" href="konw_faqs.html">FAQs</a>

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="bottom_title">CONTACT US</div>
                        <div>
                            <a class="bottom_p" href="contactus.html">1430 Decision Street</a>
                            <a class="bottom_p" href="contactus.html"> Vista, CA 92081</a>
                            <a class="bottom_p" href="contactus.html">+760.727.1280</a>
                            <a class="bottom_p " href="contactus.html">© 2018 DJO Global All Rights Reserved</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="bottom_img">
                    <img src="img/twitter.png">
                </div>
                <div class="bottom_img">
                    <img src="img/Shape163.png">
                </div>
                <div class="bottom_img">
                    <img src="img/youtube.png">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    $(document).ready(function () {
        var mySwiper = new Swiper('.swiper-container', {
            //					autoplay: 2000,
            pagination: '.swiper-pagination '
        })
        // $('.play_icon').click(function(){
        //     var Media = document.getElementById("myVideo");
        //     Media.play(); //播放
        //     $('.play_icon').hide();
        // })
        // $('#myVideo').click(function(){
        //     var Media = document.getElementById("myVideo");
        //     Media.pause(); //停止
        //     $('.play_icon').show();
        // })


    })
</script>
</body>
</html>
